import React from 'react';
import {  } from '@ant-design/icons';

// 引入 ConfigProvider 组件, 自定义主题
import { ConfigProvider, Menu } from 'antd';
// 引入路由规则, 用来创建菜单
import { navs } from '../../router/index';
//  引入 useNavigate hook, 用来跳转路由
import { useNavigate } from 'react-router-dom';

console.log(navs);

// 用来创建菜单列表, 默认为空
const items = [];

// 循环路由规则, 根据路由规则, 创建菜单
navs.forEach(item=>{
    let obj = {
        label: item.title,
        key: '/home/'+item.path,  // 菜单必备的属性, key是唯一的, 可以使用 path替代, 以便于点击跳转路由
        icon: item.icon,
    };
    // 判断子路由
    if(item.children){
        obj.children = item.children.map(ele=>{
            return {
                label: ele.title,
                key: '/home/'+item.path+'/'+ele.path,
                // icon: ele.icon,
            }
        })
    }
    items.push(obj);
})

const MyMenu = (props) => {
const nav = useNavigate();

const onClick = (e) => {
console.log('click ', e.key);
nav(e.key);
};
return (
    <ConfigProvider
        theme={{
            components:{
                Menu:{
                    itemColor:'#000',
                    itemBorderRadius:'15',
                    itemActiveBg:'#8479E3',
                    itemHoverBg:'#F8F6FF',
                    itemHoverColor:'#7C4DFF',
                    itemSelectedBg:'#F8F6FF',
                    itemSelectedColor:'#7C4DFF',
                    popupBg:'#1677ff'
                }
            }
        }}
    >
        <Menu
        onClick={onClick}
        style={{
            background:'rgba(255,255,255,0.60)',
            color:'#000',
            fontSize:'14px'
            }}
            defaultSelectedKeys={["/home/zichan/ly"]}
            //设置默认打开
            defaultOpenKeys={['/home/zichan']}
            mode="inline"
            items={items}
            />
    </ConfigProvider>
);
};
export default MyMenu;